<script setup lang="ts">
import { open, openQQ } from '@/utils/publicMethods'
import { PropType } from 'vue'
import { UserBasic } from '@/api/type'

defineProps({
  userBasic: {
    type: Object as PropType<UserBasic>,
    required: true
  }
})
</script>

<template>
  <el-card id="user-info" class="box-card" shadow="hover" style="position: relative">
    <img src="../../assets/image/1.jpg" class="image" alt="" />

    <div style="display: flex; padding: 10px; justify-content: center; text-align: center">
      <el-avatar v-if="userBasic.avatar" :src="userBasic.avatar" class="basic-avatar" />
      <el-space direction="vertical" :size="'large'" fill style="margin-top: 20px; width: 80%">
        <h2 style="margin-bottom: 0">{{ userBasic.username }}</h2>
        <div>{{ userBasic.summary }}</div>
        <div style="padding-top: 20px">
          <el-space wrap size="default">
            <a v-if="userBasic.gitee" :href="userBasic.gitee" target="_blank">
              <div class="diamond-clip-path diamond-icon">
                <svg-icon icon-class="gitee"></svg-icon>
              </div>
            </a>
            <a :href="userBasic.github" target="_blank">
              <div class="diamond-clip-path diamond-icon">
                <svg-icon icon-class="github"></svg-icon>
              </div>
            </a>
            <a v-if="userBasic.qqNumber" :href="openQQ(userBasic.qqNumber)" target="_blank">
              <div class="diamond-clip-path diamond-icon">
                <svg-icon icon-class="qq"></svg-icon>
              </div>
            </a>
            <el-link v-if="userBasic.weChat" :underline="false" @click="open(userBasic.weChat)">
              <div class="diamond-clip-path diamond-icon">
                <svg-icon icon-class="wechat"></svg-icon>
              </div>
            </el-link>
          </el-space>
        </div>

        <div style="display: inline-flex; vertical-align: top; justify-content: space-between">
          <el-space fill direction="vertical">
            <div class="text-sm text-color">文章</div>
            <div class="text-xl font-number">{{ userBasic.articleCount }}</div>
          </el-space>
          <el-space fill direction="vertical">
            <div class="text-sm text-color">分类</div>
            <div class="text-xl font-number">{{ userBasic.categoryCount }}</div>
          </el-space>
          <el-space fill direction="vertical" size="small">
            <div class="text-sm text-color">标签</div>
            <div class="text-xl font-number">{{ userBasic.tagsCount }}</div>
          </el-space>
          <el-space fill direction="vertical" size="small">
            <div class="text-sm text-color">评论</div>
            <div class="text-xl font-number">{{ userBasic.commentCount }}</div>
          </el-space>
        </div>
      </el-space>
    </div>
  </el-card>
</template>

<style scoped>
.box-card {
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
}

.image {
  width: 100%;
  height: 170px;
  display: block;
}
.image:hover {
  transform: scale(1.1);
}

.basic-avatar {
  height: 100px !important;
  width: 100px !important;
  position: absolute !important;
  top: 115px;
  border: 5px solid #ffffff;
}
</style>
